<template>
<div>
  <div class="m-sech-wrap displayflex">
    <div class="flex1">
        <div class="m-sech-box displayflex">
        <i class="llse llse-search"></i>
        <div class="flex1 m-sech-ipt">
            <input type="text" placeholder="输入业务单号" v-model="KeyWord">
        </div>
        </div>
    </div>
    <div class="m-sech-btn" @click="search()">搜索</div>
  </div>
  <tab bar-active-color="#23a5a5" :line-width="2" active-color="#23a5a5">
    <tab-item @on-item-click="handleItemClick" selected>已签收</tab-item>
    <tab-item @on-item-click="handleItemClick">未签收</tab-item>
    <!-- <tab-item>异常</tab-item> -->
  </tab>
  <scroller lock-x scrollbar-y use-pullup height="-170" @on-pullup-loading="getData" v-if="totalRecords > 0" :pullup-config="ScrollerConfig" ref="Scroller">
    <div>
      <div class="tab-content">
        <div class="list-wrap" v-for="(item, index) in todolist">
          <div class="list-header">
            <span class="f-l">业务单号：
              <i>{{item.BBillNo}}</i>
            </span>
            <div>
              <em class="f-r orange">{{item.State | PoState}}</em>
            </div>
          </div>
          <div class="list-content">
              <dl class="displayflex">
                  <dt>
                     <div>
                        <i class="llse llse-cargo"></i>
                        <p>{{tabNo == 0?item.Pkgs:item.Pkgs}}件</p>
                      </div>
                  </dt>
                  <dd class="flex1">
                      <p>
                        <label>起运日期：</label>
                        <span>{{item.DepartureDate | GetDate}}</span>
                      </p>
                      <p>
                        <label>起运地：</label>
                        <span>{{item.DepartureAddress}}</span>
                      </p>
                      <p>
                        <label>目的地：</label>
                        <span>{{item.ArrivalAddress}}</span>
                      </p>
                      <p>
                        <label>收货单位：</label>
                        <span>{{item.SaleCorpName}}</span>
                      </p>
                      <!-- <p v-if="trtpbb.Information && trtpbb.Information != ''">
                        <label>异常原因：</label>
                        <span>ExceptionMemo,Information</span>
                      </p> -->
                  </dd>
              </dl>
          </div>

          <div class="list-btn">
            <div class="btn" @click="GoToDetail(item.Guid)">详情</div>
            <div class="btn" @click="GoToDist(item.Guid)" v-if="parseInt(item.State) > 44">配送详情</div>
            <div class="btn" @click="GoToProg(item.Guid)">进度</div>
          </div>
        </div>
      </div>
      <p class="txt-bottom" v-if="noMore"><em class="txt">我是有底线的</em></p>
    </div>
  </scroller>

  <div class="noDate_page" v-if="todolist.length == 0">
    <div class="noDate_icon">
      <i class="llse llse-null"></i>
    </div>
    暂无数据！
  </div>

  <footer-menu :status='2'></footer-menu>
</div>
</template>

<script>
import footerMenu from '@/commonComponent/footer.vue';
  export default{
    components:{
        footerMenu
    },
    data(){
      return{
        tabNo:0,
        todolist:[],
        KeyWord:'',

        totalRecords:0,
        PageIndex: 1,
        PageSize: 8,
        noMore:false,
        ScrollerConfig: {
          content: "上拉加载",
          downContent: "上拉加载",
          height: 0,
          loadingContent: "加载中...",
          upContent: "上拉加载"
        }
      }
    },
    computed:{
      userinfo(){
        return localStorage.userinfo?JSON.parse(localStorage.userinfo):null;
      }
    },
    created(){
      this.getData(0);
    },
    methods:{
      handleItemClick(e){
        this.tabNo = e;
        this.PageIndex = 1;
        this.todolist = [];
        this.totalRecords = 0;
        this.noMore = false;
        this.getData();
      },

      search(){
        this.PageIndex = 1;
        this.todolist = [];
        this.totalRecords = 0;
        this.noMore = false;
        this.getData();
      },

      getData(){
        let query = {
          PageIndex: this.PageIndex,
          PageSize: this.PageSize,
          SaleCorpGUID: this.userinfo.Name,
          SaleCorpName: this.userinfo.LogonUser,
          TenantGuid:this.userinfo.TenantGuid,
          Varchar2:"N",
          // OrderBy:0,
        };
        if(this.tabNo== 0) {
          query.State = "81";
          query.StateS = "81";
        }
        if(this.tabNo == 1) {
          query.statelist = [12, 20, 21, 22, 23, 31, 41, 42, 44, 51, 52, 53, 56];
          query.ExceptionMark = "N";
        }
        if(this.KeyWord != '') {
          query.BBillNo = this.KeyWord;
        }
        this.Ajax.post('SearchReceivingApi', query).then((res) => {
          if(res.IsSuccess){
            this.totalRecords = res.TotalRecords;
            if (res.Datas && res.Datas.length > 0) {
              this.PageIndex++;
              this.todolist = this.todolist.concat(res.Datas);
              this.ScrollControl();
            }
          } else {
            this.Toast(res.ErrorMessage);
          }
        })
        .catch((e) => {
          console.log(e)
          this.Toast('出错了，请刷新重试')
        })
      },

      GoToDetail(Guid){
        this.$router.push({
          path: '/receiver/detail',
          query: {
            Guid: Guid
          }
        })
      },

      GoToDist(Guid){
        this.$router.push({
          path: '/receiver/distribution',
          query: {
            Guid: Guid
          }
        })
      },

      GoToProg(Guid){
        this.$router.push({
          path: '/receiver/progress',
          query: {
            Guid: Guid
          }
        })
      },

      onScrollBottom(){

      },

      ScrollControl() {
        if (this.totalRecords <= this.PageSize) {
          this.ScrollerConfig.content = "";
          this.noMore = true;
          this.$nextTick(() => {
            this.$nextTick(() => {
              this.$refs.Scroller.disablePullup();
            });
          });
        }

        if (this.todolist.length > 0 && this.$refs.Scroller) {
          this.$nextTick(() => {
            this.$nextTick(() => {
              this.$refs.Scroller.donePullup();
            });
          });
        }

        if (this.totalRecords == this.todolist.length) {
          this.$nextTick(() => {
            this.$nextTick(() => {
              this.$refs.Scroller.disablePullup();
              this.noMore = true;
            });
          });
        }
      }
    }
  }
</script>